<template>
  <div class="currency-box">
    <div class="left">
      <!-- 搜索 start -->
      <header>
        <div class="search">
          <a-input
            placeholder="输入类型名称,回车搜索"
            v-model="listDataSearch.ProSegmentTypeName"
            @keyup.enter="upProSegmentFun"
          />
        </div>
        <div class="icon">
          <a-icon type="plus" class="icon-class" @click="addListDataFun" />
        </div>
      </header>

      <!-- 搜索 end -->
      <section
        :class="[
          'demo-infinite-container',
          listData.length == 0 ? 'empty-box' : '',
        ]"
        infinite-scroll-immediate-check="false"
        infinite-scroll-listen-for-event="false"
        v-infinite-scroll="handleinfiniteOnLoad"
        infinite-scroll-disabled="busy"
        infinite-scroll-distance="20"
      >
        <a-empty v-if="listData.length == 0" />
        <div v-else>
          <div
            :class="[
              'section-box',
              currentListData.ProSegmentTypeID == item.ProSegmentTypeID
                ? 'section-active'
                : '',
            ]"
            v-for="item in listData"
            :key="item.ProSegmentTypeID"
            @click="switchListData(item)"
          >
            <div class="section-box-info">
              {{ item.ProSegmentTypeName }}
            </div>
            <div
              class="section-box-tip"
              v-if="
                currentListData.ProSegmentTypeID == item.ProSegmentTypeID &&
                item.ProSegmentTypeID != ''
              "
            >
              <a-dropdown>
                <a-icon type="ellipsis" :rotate="90" />
                <a-menu slot="overlay">
                  <a-menu-item>
                    <span
                      @click="editListDataFun(item)"
                      style="display: flex; align-items: center"
                      ><a-icon
                        type="edit"
                        style="margin-right: 0.625rem"
                      />修改</span
                    >
                  </a-menu-item>
                  <a-menu-item>
                    <span
                      @click="delListDataFun(item)"
                      style="display: flex; align-items: center"
                    >
                      <a-icon type="delete" />删除</span
                    >
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </div>
          </div>
        </div>

        <a-spin v-if="listDataLoading" class="demo-loading" />
        <!-- 左边列表 End -->
      </section>
    </div>

    <div class="right">
      <div class="operation-search">
        <a-form layout="inline">
          <a-form-item label="工作集名称">
            <a-input v-model="tableSearch.JobGroupName" />
          </a-form-item>
          <a-form-item label="工作集编码">
            <a-input v-model="tableSearch.JobGroupNo" />
          </a-form-item>
          <a-form-item>
            <a-button
              class="default-button"
              :loading="loading"
              @click="upTableListFun"
            >
              查询
            </a-button>
          </a-form-item>
          <a-form-item>
            <a-button
              class="default-button"
              @click="addWorkSetFun"
              :disabled="currentListData.ProSegmentTypeID == ''"
            >
              添加
            </a-button>
          </a-form-item>
          <a-form-item>
            <a-button
              class="default-button"
              :disabled="tableRow.length == 0"
              @click="allDelTableFun"
            >
              批量删除
            </a-button>
          </a-form-item>
          <a-form-item>
            <a-button
              class="default-button"
              @click="downloadTemplate"
              :disabled="listData.length == 0"
            >
              下载导入模板
            </a-button>
          </a-form-item>
          <a-form-item>
            <a-button
              class="default-button"
              @click="importTemplate"
              :disabled="listData.length == 0"
            >
              导入模板
            </a-button>
          </a-form-item>
        </a-form>
      </div>
      <div class="table-box">
        <a-table
          className="components-table-demo-nested"
          :columns="tableColumns"
          :row-key="(record) => record.JobGroupID"
          :data-source="tableData"
          :loading="loading"
          :row-selection="{
            selectedRowKeys: tableRowKeys,
            onChange: tableChangeFun,
          }"
          :customRow="rowClick"
          :rowClassName="setRowClassName"
          :scroll="{ y: tableBoxNum }"
          :pagination="false"
          size="middle"
        >
          <template slot="VerifyStatusName" slot-scope="text, record">
            <a-tag :color="record.VerifyStatus ? 'green' : 'loser'">
              {{ record.VerifyStatusName }}
            </a-tag>
          </template>
          <template slot="RatifyStatusName" slot-scope="text, record">
            <a-tag :color="record.RatifyStatusName ? 'green' : 'loser'">
              {{ record.RatifyStatusName }}
            </a-tag>
          </template>

          <template slot="action" slot-scope="text, record">
            <div class="chart-manage">
              <a-icon
                type="delete"
                class="icon-class"
                @click="delTableFun(record)"
              />
            </div>
          </template>
        </a-table>
        <footer class="table-paging">
          <a-pagination
            show-size-changer
            :default-current="1"
            v-model="tableSearch.pageRequestModel.pageIndex"
            :page-size.sync="tableSearch.pageRequestModel.pageSize"
            :total="tableTotal"
            @change="tableChange"
            @showSizeChange="tablehowsizeChange"
          />
        </footer>
      </div>
    </div>
    <segment-type-model
      :show.sync="isListShow"
      :is-edit="isListEdit"
      :item="operateListData"
      @updata="upProSegmentFun"
    ></segment-type-model>

    <work-set-model
      :show.sync="isWorkSetShow"
      :item="currentListData"
      @updata="upTableListFun"
    ></work-set-model>

    <!-- 文件上传 -->
    <file-form :show.sync="templateShow" @upList="upTableListFun"></file-form>
  </div>
</template>
<script>
import FileForm from "./children/file-form.vue";
import SegmentTypeModel from "./children/proSegmentTypeModel.vue";
import WorkSetModel from "./children/worksetModel.vue";
import {
  getProSegmentTypeList,
  delProSegmentType,
  getJobProSegmentTypeRelationsList,
  delJobProSegmentTypeRelations,
  downloadProSegmentType,
} from "@/api/ProSegmentType/index";
const tableColumns = [
  {
    title: "序号",
    dataIndex: "num",
    key: "num",
    align: "center",
    width: "10%",
  },
  {
    title: "设备类型",
    dataIndex: "ProSegmentTypeName",
    key: "ProSegmentTypeName",
    align: "center",
    width: "20%",
  },
  {
    title: "工作集编码",
    dataIndex: "JobGroupNo",
    key: "JobGroupNo",
    ellipsis: true,
    align: "center",
    width: "20%",
  },
  {
    title: "工作集名称",
    dataIndex: "JobGroupName",
    key: "JobGroupName",
    ellipsis: true,
    align: "center",
    width: "20%",
  },
  {
    title: "工作集版本号",
    dataIndex: "JobTempletVisionOut",
    key: "JobTempletVisionOut",
    ellipsis: true,
    align: "center",
    width: "20%",
  },
  {
    title: "状态",
    dataIndex: "RatifyStatusName",
    key: "RatifyStatusName",
    ellipsis: true,
    align: "center",
    width: "20%",
    scopedSlots: { customRender: "RatifyStatusName" },
  },
  {
    title: "审核状态",
    dataIndex: "VerifyStatusName",
    key: "VerifyStatusName",
    ellipsis: true,
    align: "center",
    width: "20%",
    scopedSlots: { customRender: "VerifyStatusName" },
  },
  {
    title: "操作",
    dataIndex: "operate",
    width: "10%",
    align: "center",
    scopedSlots: { customRender: "action" },
  },
]; //基础项表格表头
export default {
  name: "ProSegmentType",
  components: { SegmentTypeModel, WorkSetModel, FileForm },
  data() {
    return {
      /** 左侧列表搜索 */
      listDataSearch: {
        pageRequestModel: { pageIndex: 1, pageSize: 20 },
        ProSegmentTypeName: null, //类型名称
        ProSegmentTypeStatus: "", //类型状态
      },
      listData: [{ ProSegmentTypeID: "", ProSegmentTypeName: "全部" }], //左侧列表
      currentListData: {
        ProSegmentTypeName: null,
        ProSegmentTypeDesc: null,
      }, //当前选中的左侧列表对象
      operateListData: {}, //新增/修改的列表对象
      listDataLoading: false, //左侧列表loading
      busy: false, //加载更多状态
      isListShow: false, //添加/修改类型
      isListEdit: false, //是否修改类型
      loading: false, //按钮loading
      /** 右侧表格数据 */
      tableColumns, //表格表头
      tableData: [], //表格数据
      tableRow: [], //当前选中表格项
      tableRowKeys: [], //当前选中表格ID
      tableBoxNum: 0, //基础项表格高度
      tableTotal: 0, //表格总条数
      tableSearch: {
        pageRequestModel: { pageIndex: 1, pageSize: 20 },
        ProSegmentTypeID: "",
        JobGroupName: "",
        JobGroupNo: "",
      }, //table的搜索
      isWorkSetShow: false, //显示新增工作集
      templateFile: [], //模板列表
      templateShow: false, //导入模板弹窗
      rowClick: (record, index) => {
        return {
          on: {
            click: () => {},
          },
        };
      }, //表格点击方法
    };
  },
  mounted() {
    this.getDataListFun();
  },
  computed: {},
  methods: {
    /* 左侧 start */

    /** 查询左侧列表 */
    async getDataListFun() {
      try {
        let { Data } = await getProSegmentTypeList(this.listDataSearch);
        this.listData = [...this.listData, ...Data.Data];
        if (this.listData.length > 0) {
          this.currentListData = this.listData[0];
          this.upTableListFun();
        }
      } catch (e) {
        this.$message.error(e);
      } finally {
        this.busy = false;
      }
    },
    /** 更新左侧列表(设备类型) */
    upProSegmentFun() {
      this.listData = [{ ProSegmentTypeID: "", ProSegmentTypeName: "全部" }];
      this.listDataSearch.pageRequestModel.pageIndex = 1;
      this.listDataSearch.pageRequestModel.pageSize = 20;
      this.getDataListFun();
    },

    /** 切换选中左侧列表 */
    switchListData(item) {
      this.currentListData = JSON.parse(JSON.stringify(item));
      this.operateListData = JSON.parse(JSON.stringify(item));
      this.tableData = [];
      this.getTableListFun();
    },
    /** 新增左侧列表信息 */
    addListDataFun() {
      this.operateListData = {
        ProSegmentTypeName: null,
        ProSegmentTypeDesc: null,
      };
      this.isListShow = true;
      this.isListEdit = false;
    },
    /** 修改左侧列表信息 */
    editListDataFun(item) {
      this.operateListData = JSON.parse(JSON.stringify(item));
      this.isListShow = true;
      this.isListEdit = true;
    },
    /** 删除左侧列表信息 */
    delListDataFun(item) {
      let that = this;
      this.$confirm({
        title: "提示",
        content: `删除【${item.ProSegmentTypeName}】项`,
        async onOk() {
          try {
            await delProSegmentType([item]);
            that.$message.success("删除成功");
            that.upProSegmentFun();
          } catch (e) {
            that.$message.error(e);
          }
        },
        onCancel() {},
      });
    },
    /** 加载更多 */
    handleinfiniteOnLoad() {
      this.busy = true;
      setTimeout(() => {
        this.listDataSearch.pageRequestModel.pageIndex += 1;
        this.getDataListFun();
      }, 1000);
    },
    /* 左侧 end */

    /* 右侧表格 start */
    /** 工作集选中的项 */
    tableChangeFun(selectedRowKeys, selectedRows) {
      this.tableRow = selectedRows; //选中项信息
      this.tableRowKeys = selectedRowKeys; //选中项ID
    },

    /** 选中表格项变换颜色 */
    setRowClassName(record, index) {
      return record.BasicID == this.tableRow.BasicID ? "clickRowStyl" : ""; //
    },

    /** 查询表格项 */
    async getTableListFun() {
      this.tableSearch.ProSegmentTypeID = this.currentListData.ProSegmentTypeID;
      try {
        let { Data } = await getJobProSegmentTypeRelationsList(
          this.tableSearch
        );
        this.tableData = Data.Data;
        this.tableTotal = Data.TotalNumber;
        let { pageIndex, pageSize } = this.tableSearch.pageRequestModel;
        this.tableData.map((item, index) => {
          item.num = (pageIndex - 1) * pageSize + index + 1;
          item.VerifyStatusName = item.VerifyStatus ? "已审核" : "未审核";
          item.RatifyStatusName = item.RatifyStatus ? "已批准" : "未批准";
        });
      } catch (e) {
        this.$message.error(e);
      } finally {
      }
    },

    /** 更新表格项内容 */
    upTableListFun() {
      this.tableData = [];
      this.tableSearch.pageRequestModel.pageIndex = 1;
      this.tableSearch.pageRequestModel.pageSize = 20;
      this.getTableListFun();
    },

    /** 删除表格项 */
    delTableFun(record) {
      let that = this;
      this.$confirm({
        title: "提示",
        content: `删除【${record.JobGroupName}】项`,
        async onOk() {
          try {
            let res = await delJobProSegmentTypeRelations([record]);
            if (!res.Success) throw new Error(res.Message);
            that.$message.success("删除成功");

            that.upTableListFun();
          } catch (e) {
            that.$message.error(e.message);
          }
        },
        onCancel() {},
      });
    },

    /** 批量删除表格项 */
    allDelTableFun() {
      let that = this;
      this.$confirm({
        title: "提示",
        content: `删除【${this.tableRow.length}】项`,
        async onOk() {
          try {
            let res = await delJobProSegmentTypeRelations(that.tableRow);
            if (!res.Success) throw new Error(res.Message);
            that.$message.success("删除成功");

            that.upTableListFun();
          } catch (e) {
            that.$message.error(e.message);
          }
        },
        onCancel() {},
      });
    },

    /** 表格页数点击 */
    tableChange(page, pageSize) {
      this.tableSearch.pageRequestModel.pageIndex = page;
      this.tableSearch.pageRequestModel.pageSize = pageSize;
      this.getTableListFun();
    },
    /** 基础项条数选择 */
    tablehowsizeChange(current, size) {
      this.tableSearch.pageRequestModel.pageIndex = current;
      this.tableSearch.pageRequestModel.pageSize = size;
      this.getTableListFun();
    },
    /** 新增工作集 */
    addWorkSetFun() {
      this.isWorkSetShow = true;
    },
    /** 下载类型模板 */
    async downloadTemplate() {
      try {
        let { Data } = await downloadProSegmentType();
        let raw = window.atob(Data.FilebyteStr);
        let uInt8Array = new Uint8Array(raw.length);
        for (let i = 0; i < raw.length; i++) {
          uInt8Array[i] = raw.charCodeAt(i);
        }
        const blob = new Blob([uInt8Array], {
          type: "application/vnd.ms-exce",
        });
        let url = window.URL.createObjectURL(blob);
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.download = `${Data.Name}`;
        document.body.appendChild(link);
        link.click();
        this.$message.success("下载成功");
      } catch (e) {
        this.$message.error(e);
      }
    },

    /** 导入工序模板 */
    importTemplate() {
      this.templateShow = true;
    },
  },
};
</script>
<style scoped lang="less">
.table-box {
  display: flex;
  flex-direction: column;
  height: calc(100% - 6.75rem);
  .ant-table-wrapper {
    flex: 3;
    overflow: auto !important;
  }

  .table-paging {
    margin: 0.3125rem 0;
    display: flex;
    justify-content: flex-end;
  }

  .extattrbute-table-box {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;

    .extattrbute-operation-search {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title {
        font-weight: 700;
        margin-bottom: 0.3125rem;
      }
    }

    .ant-table-wrapper {
      flex: 3;
    }

    .table-paging {
      margin: 0.3125rem 0;
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>
